<!-- 附加功能 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="附加功能" name="1">
            <div class="additional-function">
                <template v-if="showSearch">
                    <div class="function-item">
                        <div class="left-wrap">搜索</div>
                        <div class="right-wrap search-wrap" @click="onSelectFunction('search')">
                            <div class="right-mark">
                                {{ !bindSearch ? '添加' : '去设置' }}
                            </div>
                            <div class="right-content">搜索</div>
                        </div>
                    </div>
                </template>

                <!-- <template v-if="showSort">
                    <div class="function-item">
                        <div class="left-wrap">排序</div>
                        <div class="right-wrap sort-wrap" @click="onSelectFunction('sort')">
                            <div class="right-mark">
                                {{ !bindSort ? '添加' : '去设置' }}
                            </div>
                            <div class="right-content">
                                <div><span>综合</span><span><i></i><i></i></span></div>
                                <div><span>价格</span><span><i></i><i></i></span></div>
                                <div><span>销量</span><span><i></i><i></i></span></div>
                                <div><span>人气</span><span><i></i><i></i></span></div>
                            </div>
                        </div>
                    </div>
                </template>

                <template v-if="showCitylocation">
                    <div class="function-item">
                        <div class="left-wrap">定位</div>
                        <div class="right-wrap location-wrap" @click="onSelectFunction('citylocation')">
                            <div class="right-mark">
                                {{ !bindCitylocation ? '添加' : '去设置' }}
                            </div>
                            <div class="right-content">城市定位</div>
                        </div>
                    </div>
                </template> -->

                <template v-if="showNewClassify">
                    <div class="function-item">
                        <div class="left-wrap">分类</div>
                        <div class="right-wrap classify-wrap" @click="onSelectFunction('new-classify')">
                            <div class="right-mark">
                                {{ !bindClassify ? '添加' : '去设置' }}
                            </div>
                            <div class="right-content">列表分类</div>
                        </div>
                    </div>
                </template>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import { deepClone } from '@/libs/tools'
import useWidget from '@/libs/edit/widgetData'
import usePageHistory from '@/libs/edit/pageHistory'
import widgetTemplates from '@/components/edit/template-data/widget-data'
export default defineComponent({
    name: 'RowAdditionalFunction',
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)
        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)

        const {
            widgetListFlat,
            onCloneWidget,
            onSelectWidget
        } = useWidget()

        const {
            onAddPageHistory
        } = usePageHistory()

        const showSearch = computed(() => ['xxx'].includes(widgetType.value))
        const showSort = computed(() => ['xxx'].includes(widgetType.value))
        const showCitylocation = computed(() => ['xxx'].includes(widgetType.value))
        const showNewClassify = computed(() => ['xxx'].includes(widgetType.value) && widget.value.widgetData.eles.customFeature.classifyName !== 'level1-vertical')

        // 绑定的搜索控件
        const bindSearch = computed(() => {
            return Object.values(widgetListFlat.value).find(item => {
                return (item.widgetData.eles.type === 'search') && (item.widgetData?.eles?.customFeature?.searchObject?.customFeature?.id === widget.value.widgetData?.eles?.customFeature?.id)
            })
        })
        
        // 绑定的排序控件
        const bindSort = computed(() => {
            return Object.values(widgetListFlat.value).find(item => {
                return (item.widgetData.eles.type === 'sort') && (item.widgetData?.eles?.customFeature?.['sort_object'] === widget.value.widgetData?.eles?.customFeature?.id)
            })
        })

        // 绑定的定位控件
        const bindCitylocation = computed(() => {
            return Object.values(widgetListFlat.value).find(item => {
                return (item.widgetData.eles.type === 'citylocation') && (item.widgetData?.eles?.customFeature?.citylocation?.customFeature?.id === widget.value.widgetData?.eles?.customFeature?.id)
            })
        })

        // 绑定的分类控件
        const bindClassify = computed(() => {
            return Object.values(widgetListFlat.value).find(item => {
                return (item.widgetData.eles.type === 'new-classify') && (item.widgetData?.eles?.customFeature?.refreshObject === widget.value.widgetData?.eles?.customFeature?.id)
            })
        })

        const onSelectFunction = type => {
            switch (type) {
                case 'search':
                    if (!!bindSearch.value) {
                        onSelectWidget([bindSearch.value.widgetData.eles.id])
                    } else {
                        const newWidget = onCloneWidget(widgetTemplates[type])
                        newWidget.eles.customFeature.searchObject = {
                            ...deepClone(widget.value.widgetData.eles),
                            widgetIdPath: [widget.value.widgetData.eles.id],
                            subPageResponse: 'inner-link',
                            subFuntionResponse: 'call',
                            isVessel: true,
                            name: widget.value.widgetData.component.title
                        }
                        widget.value.parentContent.splice(widget.value.widgetIndex, 0, newWidget)
                        onSelectWidget([newWidget.eles.id])
                        onAddPageHistory()
                    }
                    break;
                case 'sort':
                    if (!!bindSort.value) {
                        onSelectWidget([bindSort.value.widgetData.eles.id])
                    } else {
                        const newWidget = onCloneWidget(widgetTemplates[type])
                        newWidget.eles.customFeature['sort_object'] = widget.value.widgetData.eles.customFeature.id
                        widget.value.parentContent.splice(widget.value.widgetIndex, 0, newWidget)
                        onSelectWidget([newWidget.eles.id])
                        onAddPageHistory()
                    }
                    break;
                case 'citylocation':
                    if (!!bindCitylocation.value) {
                        onSelectWidget([bindCitylocation.value.widgetData.eles.id])
                    } else {
                        const newWidget = onCloneWidget(widgetTemplates[type])
                        newWidget.eles.customFeature.searchObject = {
                            ...deepClone(widget.value.widgetData.eles),
                            widgetIdPath: [widget.value.widgetData.eles.id],
                            subPageResponse: 'inner-link',
                            subFuntionResponse: 'call',
                            isVessel: true,
                            name: widget.value.widgetData.component.title
                        }
                        widget.value.parentContent.splice(widget.value.widgetIndex, 0, newWidget)
                        onSelectWidget([newWidget.eles.id])
                        onAddPageHistory()
                    }
                    break;
                case 'new-classify':
                    if (!!bindClassify.value) {
                        onSelectWidget([bindClassify.value.widgetData.eles.id])
                    } else {
                        const newWidget = onCloneWidget(widgetTemplates[type])
                        newWidget.eles.customFeature.refreshObject = widget.value.widgetData.eles.customFeature.id
                        widget.value.parentContent.splice(widget.value.widgetIndex, 0, newWidget)
                        onSelectWidget([newWidget.eles.id])
                        onAddPageHistory()
                    }
                    break;
            
                default:
                    console.warn('不支持该控件类型-' + type)
                    break;
            }
        }

        return {
            widget,
            widgetType,

            showSearch,
            showSort,
            showCitylocation,
            showNewClassify,

            bindSearch,
            bindSort,
            bindCitylocation,
            bindClassify,

            onSelectFunction
        }
    }
})
</script>

<style lang="less" scoped>
.additional-function {
    .function-item {
        display: flex;
        align-items: center;
        & + .function-item {
            margin-top: 20px;
        }
        .left-wrap {
            margin-right: 10px;
        }
        .right-wrap {
            flex: 1;
            position: relative;
            border: 1px solid var(--edit-color-primary-light-5);
            cursor: pointer;
            &:hover {
                .right-mark {
                    display: block;
                    z-index: 1;
                }
            }
            &.search-wrap .right-content,
            &.location-wrap .right-content,
            &.classify-wrap .right-content {
                padding-left: 6px;
            }
            &.sort-wrap {
                .right-content {
                    & > div {
                        display: inline-block;
                        width: calc(25% - 1px);
                        vertical-align: top;
                        font-size: 14px;
                        text-align: center;
                        color: var(--edit-color-info);
                    }
                    span {
                        position: relative;
                        &:first-child {
                            margin-right: 5px;
                        }
                    }
                    i {
                        position: absolute;
                        top: 6px;
                        border-left: 2px solid transparent;
                        border-right: 2px solid transparent;
                        &:first-child {
                            border-bottom: 4px solid;
                        }
                        &:last-child {
                            top: 11px;
                            border-top: 4px solid;
                        }
                    }
                }
            }
            .right-mark {
                display: none;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                color: var(--edit-color-white);
                text-align: center;
                line-height: 32px;
                background-color: rgba(0, 0, 0, 0.5);
                cursor: pointer;
            }
            .right-content {
                height: 32px;
                line-height: 32px;
                color: var(--edit-color-primary);
                background-color: var(--edit-color-primary-light-9);
            }
        }
    }
}
</style>